<template>
  <div>
    <el-table ref="tableRef" v-loading="loading" :data="dataSource" border stripe :height="autoHeight" @row-click="handleRowClick" @select="selectSingle" @select-all="selectAll" @selection-change="selectAll" >
      <el-table-column label="查询名称" prop="queryName" align="center" width="150px"></el-table-column>
      <el-table-column label="引用属性" prop="joinProp" align="center" width="150px"></el-table-column>
      <el-table-column label="查询SQL" prop="querySql" align="center"></el-table-column>
      <el-table-column label="匹配表头" prop="matchColumn" align="center"></el-table-column>
      <el-table-column label="映射表头" prop="mapperColumn" align="center"></el-table-column>
      <el-table-column label="操作" width="100px">
        <template slot="header">
          <el-button type="primary" @click="visible = true" icon="el-icon-circle-plus-outline"></el-button>
        </template>
        <template slot-scope="scope">
          <el-button type="success" icon="el-icon-edit" circle @click="editQuery(scope.row)" title="编辑"></el-button>
          <el-button type="danger" icon="el-icon-delete" circle @click="removeData(scope.row, scope.$index)" title="删除"></el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="lab-table-page">
      <div style="display: inline-flex">
        <el-pagination
            :disabled="loading"
            :current-page="pageInfo.page"
            :page-sizes="[5, 10, 15, 20, 50, 100]"
            :page-size="pageInfo.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageInfo.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
        <el-button-group style="padding: 2px 5px">
          <el-button icon="el-icon-refresh" title="刷新" :disabled="loading" @click="loadSource([])" />
        </el-button-group>
      </div>
    </div>

    <el-dialog title="辅助查询" :visible.sync="visible" width="80%">
      <el-form label-width="100px" label-position="right">
        <el-form-item label="查询名称">
          <el-input v-model="entityInfo.queryName"></el-input>
        </el-form-item>
        <el-form-item label="引用属性">
          <el-input v-model="entityInfo.joinProp"></el-input>
        </el-form-item>
        <el-form-item label="匹配表头">
          <el-select v-model="entityInfo.matchColumns" multiple style="width: 100%">
            <el-option v-for="column in columns" :key="column.columnId" :value="column.columnTitle" :label="column.columnTitle" ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="映射表头">
          <el-select v-model="entityInfo.mapperColumns" multiple style="width: 100%">
            <template v-for="column in columns">
              <el-option v-if="entityInfo.matchColumns && !entityInfo.matchColumns.includes(column.columnTitle)"  :key="column.columnId" :value="column.columnTitle" :label="column.columnTitle" ></el-option>
            </template>
          </el-select>
        </el-form-item>
        <el-form-item label-width="0">
          <code-editor ref="queryRef" :config="{language:'mysql'}" style="height: 300px"></code-editor>
        </el-form-item>
        <el-form-item style="text-align: center">
          <el-button icon="el-icon-circle-check" type="success" @click="saveQuery">{{ entityInfo.queryId ? '更新' : '保存' }}</el-button>
          <el-button icon="el-icon-circle-close" type="info" @click="visible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import IdeaTable from "@/mixins/IdeaTable";
import CodeEditor from "@/components/codeEditor/CodeEditor";

export default {
  name: "ExcelQueryTable",
  components: {CodeEditor},
  mixins: [IdeaTable],
  inject: {
    excelTemplate: {
      from: 'excelTemplate',
      default: function () {
        return { sheets: [], excelId: '0' }
      }
    }
  },
  data() {
    return {
      columns: []
    }
  },
  computed: {
    autoHeight(){
      return `calc(100vh - 292px)`
    }
  },
  watch: {
    visible() {
      if (this.visible) {
        setTimeout(() => {
          this.apdateRef(true)
        }, 500)
      }
    }
  },
  created() {
    this.queryUrl = 'excelQuery/queryPage'
    this.saveUrl = 'excelQuery/save'
    this.removeUrl = 'excelQuery/delete/'
    this.rowKey = 'queryId'
    this.pageInfo.pageSize = 20
    this.addFilter({ field: 'excelId',op: '=',value: this.excelTemplate.excelId })
    this.addFilter({ field: 'outId',op: '=',value: this.excelTemplate.excelOut.outId })
    this.sheetChange()
    this.loadSource()
  },
  methods: {
    initEntity() {
      this.entityInfo = { matchColumns: [], mapperColumns: [], querySql: '',
        excelId: this.excelTemplate.excelId, outId: this.excelTemplate.excelOut.outId }
    },
    apdateRef(set) {
      const $query = this.$refs.queryRef
      if (set) {
        $query.setValue(this.entityInfo.querySql || '', 'mysql')
        this.$set(this.entityInfo, 'matchColumns', this.$Util.toArray(this.entityInfo.matchColumn))
        this.$set(this.entityInfo, 'mapperColumns', this.$Util.toArray(this.entityInfo.mapperColumn))
      } else {
        this.$set(this.entityInfo, 'querySql', $query.code)
        this.$set(this.entityInfo, 'matchColumn', this.$Util.toTextString(this.entityInfo.matchColumns))
        this.$set(this.entityInfo, 'mapperColumn', this.$Util.toTextString(this.entityInfo.mapperColumns))
      }
    },
    editQuery(row) {
      this.entityInfo = this.$Util.copy(row)
      this.visible = true
    },
    saveQuery() {
      this.entityInfo.excelId = this.excelTemplate.excelId
      this.entityInfo.outId = this.excelTemplate.excelOut.outId
      this.entityInfo.queryMain = false
      this.apdateRef(false)
      this.saveData(this.entityInfo)
    },
    sheetChange() {
      const { outName } = this.excelTemplate.excelOut
      let sheet = undefined
      if (outName) {
        sheet = this.excelTemplate.sheets.find(item => item.sheetName === outName)
      }
      if (sheet) {
        this.$post('excelColumn/queryPage', {
          pageSize: -1, filters: [
            { field: 'excelId', op: '=', value: this.excelTemplate.excelId },
            { field: 'sheetId', op: '=', value: sheet.sheetId },
          ]
        }).then(res => {
          if (res.code === 200) {
            const { records } = res.data
            this.columns.splice(0, this.columns.length)
            records.forEach(item => {
              this.columns.push(item)
            })
          }
        })
      } else {
        this.columns.splice(0, this.columns.length)
      }
    }
  }
}
</script>

<style scoped>

</style>
